<template>
  <div id="sign">
    <div class="sign-banner">
      <div class="sb-words pc-center">
        <p class="name">立即起名</p>
        <p class="en">NAME IMMEDIATELY</p>
      </div>
    </div>
    <div class="mainBox">
      <div class="main userSign">
        <div class="sex-choose">
          <a href="javascript:;"
             @click="currentSex = 1"
             class="option active">
            <div class="img-box"
                 :class="{ male: currentSex == 1 }">
              <img :src="img1"
                   alt="" />
            </div>
            <p>男</p>
          </a>
          <a href="javascript:;"
             @click="currentSex = 0"
             class="option  active">
            <div class="img-box "
                 :class="{ female: currentSex == 0 }">
              <img :src="img2"
                   alt="" />
            </div>
            <p>女</p>
          </a>
          <a href="javascript:;"
             @click="currentSex = 2"
             class="option mid active">
            <div class="img-box"
                 :class="{ more: currentSex == 2 }">
              <img :src="img3"
                   alt="" />
            </div>
            <p>未知</p>
          </a>
        </div>
        <el-form :model="ruleForm"
                 class="userSignForm demo-ruleForm"
                 :rules="rules"
                 ref="ruleForm"
                 label-width="100px">
          <el-form-item label="姓"
                        prop="firstName"
                        required>
            <el-input class="len"
                      placeholder="请输入小孩的姓氏"
                      type="text"
                      v-model.trim="ruleForm.firstName"
                      autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="出生状态"
                        prop="bornStatus"
                        required>
            <el-radio-group v-model.trim="ruleForm.bornStatus">
              <el-radio label="已出生"></el-radio>
              <el-radio label="未出生"></el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item prop="datas"
                        v-if="ruleForm.bornStatus == '已出生'"
                        label="出生日期"
                        required>
            <el-select v-model.trim="ruleForm.datas"
                       @change="selectData"
                       placeholder="请选择">
              <el-option v-for="item in timers"
                         :key="item.value"
                         :label="item.label"
                         :value="item.value">
              </el-option>
            </el-select>
            <el-date-picker v-model.trim="ruleForm.bornTime"
                            type="datetime"
                            format="yyyy-MM-dd HH:mm"
                            placeholder="选择日期时间">
            </el-date-picker>
          </el-form-item>
          <el-form-item prop="datas"
                        v-else
                        label="预产期"
                        required>
            <el-select v-model.trim="ruleForm.datas"
                       placeholder="请选择">
              <el-option v-for="item in timers"
                         :key="item.value"
                         :label="item.label"
                         :value="item.value">
              </el-option>
            </el-select>
            <el-date-picker v-model.trim="ruleForm.willBornTime"
                            type="datetime"
                            format="yyyy-MM-dd HH:mm"
                            placeholder="选择日期时间">
            </el-date-picker>
          </el-form-item>
          <el-form-item label="公历"
                        v-if="isShow && !this.$store.state.isIos">
            <el-date-picker disabled
                            v-model.trim="nongli"
                            type="datetime"
                            placeholder="选择日期时间">
            </el-date-picker>
          </el-form-item>
          <el-form-item v-if="!isShow && !this.$store.state.isIos">
            <el-input style="margin-right:10px;"
                      class="len"
                      type="text"
                      disabled
                      placeholder="选择日期时间"
                      v-model.trim="nongliTitle"
                      autocomplete="off">
            </el-input>
            <!-- <el-date-picker
                        style="margin-right: 10px;"
                        disabled
                        v-model.trim="ruleForm.willBornTime"
                        type="datetime"
                        placeholder="选择日期时间">
                    </el-date-picker> -->
            <el-input class="len"
                      type="text"
                      disabled
                      placeholder="选择日期时间"
                      v-model.trim="gongli"
                      autocomplete="off">
              <i slot="prefix"
                 class="el-input__icon el-icon-time"></i></el-input>
            <!-- <el-date-picker
                        style="margin-right: 10px;"
                        disabled
                        v-model.trim="nongli"
                        type="datetime"
                        placeholder="选择日期时间">
                    </el-date-picker> -->
          </el-form-item>
          <el-form-item prop="bornArea"
                        label="出生地区"
                        required>
            <!-- <el-cascader
                        v-model="ruleForm.bornArea"
                        :options="area"
                        :props="defaultParams"
                        @change="handleChange">
                    </el-cascader> -->
            <el-select class="countrys"
                       v-model="ruleForm.country"
                       @change="handleChange"
                       placeholder="请选择国家">
              <el-option v-for="item in areaList"
                         :key="item.id"
                         :label="item.countryRegion"
                         :value="item.id">
              </el-option>
            </el-select>
            <el-select v-if="!isOtherCountry"
                       class="countrys"
                       v-model="ruleForm.province"
                       placeholder="请选择省份"
                       @change="handleChangeCity">
              <el-option v-for="item in provinceList"
                         :key="item.id"
                         :label="item.countryRegion"
                         :value="item.id">
              </el-option>
            </el-select>
            <el-select class="countrys"
                       v-model="ruleForm.city"
                       placeholder="请选择城市"
                       v-if="!isOtherCountry">
              <el-option v-for="item in cityLsit"
                         :key="item.id"
                         :label="item.countryRegion"
                         :value="item.id">
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item prop="nameLength"
                        label="起名字数"
                        required>
            <el-select v-model.trim="ruleForm.nameLength"
                       placeholder="请选择">
              <el-option label="无限制"
                         value="1"> </el-option>
              <el-option label="两个字"
                         value="2"> </el-option>
              <el-option label="三个字"
                         value="3"> </el-option>
              <el-option label="四个字"
                         value="4"> </el-option>
            </el-select>
            <div class="len">
              固定字
              <el-input v-model.trim="ruleForm.fixChar"
                        autocomplete="off"></el-input>
            </div>
            <el-select v-model.trim="ruleForm.fixPos"
                       placeholder="请选择">
              <el-option label="固定中间"
                         value="0"> </el-option>
              <el-option label="固定末尾"
                         value="1"> </el-option>
              <el-option label="没有要求"
                         value="2"> </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="父亲姓名">
            <el-input placeholder="请输入父亲姓名"
                      v-model.trim="ruleForm.fatherName"
                      autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="母亲姓名">
            <el-input placeholder="请输入母亲姓名"
                      v-model.trim="ruleForm.motherName"
                      autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="备注">
            <el-input type="textarea"
                      :rows="2"
                      placeholder="请输入备注"
                      v-model.trim="ruleForm.memo"
                      autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="上传附件">
            <el-upload class="upload-demo"
                       action="https://api.zhubaba.cn/oss/upLoad"
                       :on-preview="handlePreview"
                       :on-remove="handleRemove"
                       :headers="uploadHeaders"
                       :before-remove="beforeRemove"
                       name="file"
                       multiple
                       :on-success="uploadSuccess"
                       :limit="3"
                       :on-exceed="handleExceed"
                       :file-list="fileList">
              <el-link type="primary">点击上传</el-link>
              <!-- <el-button size="small" type="primary">点击上传</el-button> -->
            </el-upload>
          </el-form-item>

          <el-form-item label="微信/电话" prop="phoneType" required>
            <el-row :gutter="20">
              <el-col :span="4">
                <el-select v-model.trim="ruleForm.phoneType"
                        @change="selectData"
                        placeholder="请选择">
                <el-option v-for="item in wxOptions"
                          :key="item.value"
                          :label="item.label"
                          :value="item.value">
                </el-option>
              </el-select>
              </el-col>
              <el-col :span="14" style="float:right">
                <el-input placeholder="请输入微信/电话"
                        v-model.trim="ruleForm.phoneNum"
                        autocomplete="off"></el-input>
              </el-col>
            </el-row>
            
          </el-form-item>

          <el-form-item>
            <div class="xy">
              <el-checkbox v-model="checked"
                           style="margin-right: 5px;"></el-checkbox>
              <span @click="tipsClick()"
                    style="cursor: pointer;">同意《猪爸爸起名任务规则》</span>
            </div>
          </el-form-item>
          <el-form-item label-width="0"
                        v-if="tipsShow">
            <div style="height: 250px;overflow-y: scroll;border: 1px solid #CCC;padding: 10px;"
                 :style="{width:isShow?'100%':'100%'}">
              <p>猪爸爸平台一直本着公开、公平、公正、诚实、守信的原则，致力于打造中国最具诚信的数字交易平台，全力缔造互联网社会工作方式的变革。请您在发布项目（又称任务，以下统称项目）前仔细阅读以下规则及相应流程：</p>
              <h5>一、发布项目规则</h5>
              <p>1、 雇主（又称发布方、客户，以下统称雇主）在猪爸爸平台发布的项目：须为100%支付所有费用！</p>
              <p>2、雇主自由确定起名信息，套餐方案。项目一经正式发布，不能作任意修改，本规则另有规定除外。</p>
              <p>3、悬赏金：起名套餐最低为388元，回复价格最低10元/条，每个商家回复代表1条，所有费用不支持退款！</p>
              <p>4、雇主发布悬赏项目之后，必须先将悬赏金托管到猪爸爸平台指定账号，项目方审核通过。</p>
              <p>5、项目悬赏时间结束后，例如买10条商家回复！责必须在10个商家里面选一人中标，由于起名工作量比较大，本平台暂不支持退款，及更改要求！</p>

              <h5>二、投标、评标、延期规则</h5>
              <p>1、雇主与投标威客，应严格按照每个项目的"起名要求"所描述的内容执行。如果雇主提出超出"起名要求"范围的要求，平台有权拒绝，雇主也不得以此为理由拒绝选出中标方案。</p>
              <p>2、项目悬赏时间结束后，雇主有7天的评标时间，如无特殊原因，应在7天内公布中标作品或确定加价延期。如果超过评标时间，网站在电话通知雇主1天后仍不评标，将视为雇主委托猪爸爸平台按照《超期项目的处理规则》选取中标者分配赏金。</p>
              <p>3、平台在中标后被举报涉嫌抄袭的作品，经过调查核实，猪爸爸平台取消其中标资格，并进行相应的处罚，严重者查封其ID。</p>
              <p>4、项目诚信保证：与雇主有关连的人均不能以任何形式参加雇主所发布的项目，一经发现中标结果有违公平公正，即取消雇主评标权利。该项目按《废标项目的处理规则》进行处理。</p>
              <p>5、猪爸爸平台始终坚持不懈地保护知识产权，坚定中立公信原则维护雇主利益和商家工作者劳动成果权益，坚决反对作品抄袭侵权行为，坚决反对套取中标金及剽窃作品成果行为，坚决反对雇主以任何作弊方式影响中标结果的公平产生。 </p>

              <p>雇主发布项目即视为同意本规则。</p>
            </div>
          </el-form-item>
          <el-form-item>
            <el-button class="userBtn"
                       type="primary"
                       @click="submitForm('ruleForm')">提交</el-button>
          </el-form-item>
        </el-form>
      </div>
    </div>
    <clientBtn></clientBtn>
  </div>
</template>

<script>
import img1 from "@/assets/images/ic-male.png"
import img2 from "@/assets/images/ic-female.png"
import img3 from "@/assets/images/ic-question-symbol.png"
import area from "@/util/area.json";
import calendar from "./lib/timer.js";
import clientBtn from '../../components/clientBtn'
export default {
  components: {
    clientBtn
  },
  data () {
    var firstName = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请输入小孩的姓氏!'));
      } else {

        callback();
      }
    };
    var bornStatus = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请输入小孩的出生状态!'));
      } else {

        callback();
      }
    };
    var datas = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请输入日期!'));
      } else {

        callback();
      }
    };

    var phoneType = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请输入微信/电话!'));
      } else {

        callback();
      }
    };
    var bornArea = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请输入小孩的出生地区!'));
      } else {

        callback();
      }
    };
    var country = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请选择国家!'));
      } else {

        callback();
      }
    };
    var province = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请选择省份!'));
      } else {

        callback();
      }
    };
    var city = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请选择城市!'));
      } else {

        callback();
      }
    };
    var nameLength = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请输入小孩的起名字数!'));
      } else {

        callback();
      }
    };


    var fatherName = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请输入小孩的父亲姓名!'));
      } else {

        callback();
      }
    };
    var motherName = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请输入小孩的母亲姓名!'));
      } else {

        callback();
      }
    };
    var memo = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请输入备注!'));
      } else {

        callback();
      }
    };

    return {
      isShow: document.body.clientWidth < 750 ? true : false,
      defaultParams: {
        label: 'name',
        value: 'name',
        children: 'sub',
        expandTrigger: "hover"
      },
      uploadHeaders: {
        'user-session': JSON.parse(localStorage.getItem("key"))
      },
      checked: false,
      tipsShow: false,
      img1,
      img2,
      img3,
      uploadImg: [],
      area,
      currentSex: 1,
      fileList: [],
      isOtherCountry: false, // 是否外国，如果选择外国，则不显示城市和省份的下拉选择框
      timers: [
        {
          value: 1,
          label: "公历"
        },
        {
          value: 0,
          label: "农历"
        },
      ],
      wxOptions: [
        {
          value: 1,
          label: "微信"
        },
        {
          value: 0,
          label: "手机号"
        },
      ],
      ruleForm: {
        phoneType:1,
        firstName: "",
        bornStatus: "已出生",
        datas: 1,
        // bornArea:["北京","北京"],
        bornArea: '中国，北京，北京',
        bornTime: new Date(),
        willBornTime: new Date(),
        area: "",
        nameLength: "1",
        fixChar: "",
        fixPos: "2",
        fatherName: "",
        motherName: "",
        memo: "",
        country: '',//国家
        province: '',//省份
        city: '',//城市
      },
      rules: {
        firstName: [
          { validator: firstName, trigger: 'blur' }
        ],
        bornStatus: [
          { validator: bornStatus, trigger: 'blur' }
        ],
        datas: [
          { validator: datas, trigger: 'blur' }
        ],
        phoneType:[
           { validator: phoneType, trigger: 'blur' }
        ],
        bornArea: [
          { validator: bornArea, trigger: 'blur' }
        ],
        nameLength: [
          { validator: nameLength, trigger: 'blur' }
        ],
        fatherName: [
          { validator: fatherName, trigger: 'blur' }
        ],
        motherName: [
          { validator: motherName, trigger: 'blur' }
        ],
        memo: [
          { validator: memo, trigger: 'blur' }
        ],
        country: [
          { validator: country, trigger: 'blur' }
        ],
        province: [
          { validator: province, trigger: 'blur' }
        ],
        city: [
          { validator: city, trigger: 'blur' }
        ],
      },
      areaList: [],
      provinceList: [],
      cityLsit: []
    };
  },
  beforeRouteLeave (to, from, next) {
    console.log(this.ruleForm)
    sessionStorage.setItem("objs", JSON.stringify(this.ruleForm));
    setTimeout(() => {
      next()
    }, 100)

  },
  created () {
    if (sessionStorage.getItem("objs")) {
      this.ruleForm = JSON.parse(sessionStorage.getItem("objs"));
    };
    this.getAreaList();
    this.ruleForm.province = "";
    this.ruleForm.city = ""
    this.handleChange(1);
  },
  mounted () {
    _MEIQIA('hidePanel');
  },
  computed: {
    nongliTitle () {
      if (this.ruleForm.datas == 1) {
        return "农历  ";
      } else {
        return "公历  ";
      }
    },
    nongli () {
      let nows = new Date(this.ruleForm.bornTime);
      let Y = nows.getFullYear() + '-';
      let M = (nows.getMonth() + 1 < 10 ? '0' + (nows.getMonth() + 1) : nows.getMonth() + 1) + '-';
      let Ys = nows.getFullYear();
      let Ms = (nows.getMonth() + 1 < 10 ? '0' + (nows.getMonth() + 1) : nows.getMonth() + 1);
      let D = nows.getDate();
      let h = nows.getHours();
      let m = nows.getMinutes();
      let s = nows.getSeconds();
      let timers = Y + M + D;
      var timer = this.getLunarDate(timers);

      // var nongli = this.toSolar(Y,M,D)
      if (this.ruleForm.datas == 1) {
        return timer.lunarYear + '-' + timer.lunarMonth + '-' + timer.lunarDay + " " + h + ":" + m + ":" + s;
        // return "农历  ";
      } else {
        var aaa = calendar.lunar2solar(Ys, Ms, D);
        return aaa.cYear + '-' + aaa.cMonth + '-' + aaa.cDay + " " + h + ":" + m + ":" + s;
        // return "公历  ";
        // return nongli[0] + '-' + nongli[1] + '-' + nongli[2]+" "+h+":"+m+":"+s;
      }

    },
    gongli () {
      let nows = new Date(this.ruleForm.bornTime);
      let Y = nows.getFullYear() + '-';
      let M = (nows.getMonth() + 1 < 10 ? '0' + (nows.getMonth() + 1) : nows.getMonth() + 1) + '-';
      let Ys = nows.getFullYear();
      let Ms = (nows.getMonth() + 1 < 10 ? '0' + (nows.getMonth() + 1) : nows.getMonth() + 1);
      let D = nows.getDate();
      let h = nows.getHours();
      let m = nows.getMinutes();
      let s = nows.getSeconds();
      let timers = Y + M + D;
      var timer = this.getLunarDate(timers);

      // var nongli = this.toSolar(Y,M,D)
      if (this.ruleForm.datas == 1) {
        //return "公历  " +  timers+" "+h+":"+m+":"+s;
        return timer.lunarYear + '-' + timer.lunarMonth + '-' + timer.lunarDay + " " + h + ":" + m + ":" + s;
      } else {
        var aaa = calendar.lunar2solar(Ys, Ms, D);
        ///return "农历  " + timers+" "+h+":"+m+":"+s;
        return aaa.cYear + '-' + aaa.cMonth + '-' + aaa.cDay + " " + h + ":" + m + ":" + s;
        // return nongli[0] + '-' + nongli[1] + '-' + nongli[2]+" "+h+":"+m+":"+s;
      }
    },
    texts () {
      if (this.ruleForm.datas == 1) {
        return "公历/农历"
      } else {
        return "农历/公历"
      }
    },
    isReverse () {
      if (this.ruleForm.datas == 1) {
        return false
      } else {
        return true
      }
    }
  },
  methods: {
    tipsClick () {
      this.tipsShow = !this.tipsShow
    },
    // 起名信息附件上传回调
    uploadSuccess (response, file, fileList) {
      this.uploadImg.push(response.data);
    },
    //获取国家list
    async getAreaList () {
      let res = await this.$ajax.get("/area/getCountry");
      if (res.data.code == 0) {
        this.areaList = res.data.data;
        this.ruleForm.country = res.data.data[0].id;
      }
    },
    selectData (val) {
    },
    //获取省份
    handleChange (val) {
      if (val >= 2) {
        this.ruleForm.province = '';
        this.ruleForm.city = '';
        this.isOtherCountry = true;
        return;
      } else {
        this.isOtherCountry = false;
      }
      // let 
      this.$ajax.post('/area/getProvince?countryId=' + val)
        .then(res => {
          if (res.data.code == 0) {
            this.ruleForm.province = res.data.data[0].id;
            this.handleChangeCity(this.ruleForm.province);
            this.provinceList = res.data.data;
          }
        }).catch(err => {
          console.log(err, '异常')
        })
    },
    //获取城市
    handleChangeCity (val) {
      this.$ajax.post('/area/getCity?provinceId=' + val)
        .then(res => {
          if (res.data.code == 0) {
            this.ruleForm.city = ''
            this.ruleForm.city = res.data.data[0].id;
            this.cityLsit = res.data.data;
          }

        }).catch(err => {
          console.log(err, '异常')
        })
    },
    handleRemove (file, fileList) {
      for (let i = 0; i < this.uploadImg.length; i++) {
        if (this.uploadImg[i] == file.response.data) {
          this.uploadImg.splice(i, 1);
        }
      }
    },
    handlePreview (file) {
    },
    handleExceed (files, fileList) {
      this.$message.warning(`当前限制选择 3 个文件，本次选择了 ${files.length} 个文件，共选择了 ${files.length + fileList.length} 个文件`);
    },
    beforeRemove (file, fileList) {
      return this.$confirm(`确定移除 ${file.name}？`);
    },
    postMes () {
      var status;
      if (this.bornStatus == "已出生") {
        status = 0
      } else {
        status = 1
      }
      let nows = new Date(this.ruleForm.bornTime);
      let Y = nows.getFullYear() + '-';
      let M = (nows.getMonth() + 1 < 10 ? '0' + (nows.getMonth() + 1) : nows.getMonth() + 1) + '-';
      let D = nows.getDate();
      let h = nows.getHours();
      let m = nows.getMinutes();
      let s = nows.getSeconds();
      let timers = Y + M + D + " " + h + ":" + m + ":" + s;
      var areas;
      // if(this.ruleForm.bornArea){
      //     areas = this.ruleForm.bornArea.join("-");
      // }else{
      //     areas = this.ruleForm.bornArea
      // }
      let findCountry = this.areaList.find(v => {
        return v.id == this.ruleForm.country
      });
      let findprovince = this.provinceList.find(v => {
        return v.id == this.ruleForm.province
      })
      let findCity = this.cityLsit.find(v => {
        return v.id == this.ruleForm.city
      })
      if (this.ruleForm.country && this.ruleForm.province && this.ruleForm.city) {
        areas = findCountry.countryRegion + ',' + findprovince.countryRegion + ',' + findCity.countryRegion
      } else {
        areas = this.ruleForm.bornArea
      }

      var names = this.ruleForm.firstName;
      if (this.ruleForm.datas == 1) {
        names = "公历/" + names
      } else {
        names = "农历/" + names
      }
      var obj = {
        sex: this.currentSex,
        firstName: names,
        bornStatus: status,
        bornTime: timers,
        bornArea: areas,
        nameLength: this.ruleForm.nameLength,
        fixChar: this.ruleForm.fixChar,
        fixPos: this.ruleForm.fixPos,
        fatherName: this.ruleForm.fatherName,
        motherName: this.ruleForm.motherName,
        motherName: this.ruleForm.motherName,
        memo: this.ruleForm.memo,
        files: this.uploadImg,
        phoneType:this.ruleForm.phoneType,
        phoneNum:this.ruleForm.phoneNum
      }
      sessionStorage.setItem("obj", JSON.stringify(obj));
      var url = "payment.html";
      // var url = `payment.html?
      // sex=${this.currentSex}
      // firstName=${this.ruleForm.firstName
      // }bornStatus=${status}
      // bornTime=${this.ruleForm.bornTime}
      // bornArea=${this.ruleForm.bornArea}
      // nameLength=${this.ruleForm.nameLength}
      // fixChar=${this.ruleForm.fixChar}
      // fixPos=${this.ruleForm.fixPos}
      // fatherName=${this.ruleForm.fatherName}
      // motherName=${this.ruleForm.motherName}
      // memo=${this.ruleForm.memo}`;
      setTimeout(() => {
        this.$router.push("/qiming/payment");
      }, 100)

    },
    submitForm (formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          if(!this.ruleForm.phoneNum){
            this.$message.error("请输入微信/电话");
            return
          }
          if (this.checked) {
            if (localStorage.getItem("key")) {
              this.postMes();
            } else {
              this.$message.error("请先登陆才能继续下面操作,即将跳转到登陆页!");
              setTimeout(() => {
                this.$router.push("/userlogin")
              }, 1000)
            }
          } else {
            this.$message.error("请先同意猪爸爸起名任务规则!");
          }
        } else {
          return false;
        }
      });
    },
    resetForm (formName) {
      this.$refs[formName].resetFields();
    },

    toSolar: function (year, month, day) { //农历转阳历

      //return Lunar.toSolar(year, month, day);
    },
    getLunarDate (date) { // 阳历转农历

      var lunar = {
        tg: '甲乙丙丁戊己庚辛壬癸',
        dz: '子丑寅卯辰巳午未申酉戌亥',
        number: '一二三四五六七八九十',
        year: '鼠牛虎兔龙蛇马羊猴鸡狗猪',
        month: '正二三四五六七八九十冬腊',
        monthadd: [0, 31, 59, 90, 120, 151, 181, 212, 243, 273, 304, 334],
        calendar: [0xA4B, 0x5164B, 0x6A5, 0x6D4, 0x415B5, 0x2B6, 0x957, 0x2092F, 0x497, 0x60C96, 0xD4A, 0xEA5, 0x50DA9, 0x5AD, 0x2B6, 0x3126E, 0x92E, 0x7192D, 0xC95, 0xD4A, 0x61B4A, 0xB55, 0x56A, 0x4155B, 0x25D, 0x92D, 0x2192B, 0xA95, 0x71695, 0x6CA, 0xB55, 0x50AB5, 0x4DA, 0xA5B, 0x30A57, 0x52B, 0x8152A, 0xE95, 0x6AA, 0x615AA, 0xAB5, 0x4B6, 0x414AE, 0xA57, 0x526, 0x31D26, 0xD95, 0x70B55, 0x56A, 0x96D, 0x5095D, 0x4AD, 0xA4D, 0x41A4D, 0xD25, 0x81AA5, 0xB54, 0xB6A, 0x612DA, 0x95B, 0x49B, 0x41497, 0xA4B, 0xA164B, 0x6A5, 0x6D4, 0x615B4, 0xAB6, 0x957, 0x5092F, 0x497, 0x64B, 0x30D4A, 0xEA5, 0x80D65, 0x5AC, 0xAB6, 0x5126D, 0x92E, 0xC96, 0x41A95, 0xD4A, 0xDA5, 0x20B55, 0x56A, 0x7155B, 0x25D, 0x92D, 0x5192B, 0xA95, 0xB4A, 0x416AA, 0xAD5, 0x90AB5, 0x4BA, 0xA5B, 0x60A57, 0x52B, 0xA93, 0x40E95]
      }

      var year, month, day;
      if (!date) {
        date = new Date(), year = date.getFullYear(), month = date.getMonth(), day = date.getDate();
      } else {
        date = date.split('-'), year = parseInt(date[0]), month = date[1] - 1, day = parseInt(date[2]);
      }

      if (year < 1921 || year > 2020) {
        return {}
      }

      var total, m, n, k, bit, lunarYear, lunarMonth, lunarDay;
      var isEnd = false;
      var tmp = year;
      if (tmp < 1900) {
        tmp += 1900;
      }
      total = (tmp - 1921) * 365 + Math.floor((tmp - 1921) / 4) + lunar.monthadd[month] + day - 38;
      if (year % 4 == 0 && month > 1) {
        total++;
      }
      for (m = 0; ; m++) {
        k = (lunar.calendar[m] < 0xfff) ? 11 : 12;
        for (n = k; n >= 0; n--) {
          bit = (lunar.calendar[m] >> n) & 1;
          if (total <= 29 + bit) {
            isEnd = true;
            break;
          }
          total = total - 29 - bit;
        }
        if (isEnd) break;
      }
      lunarYear = 1921 + m;
      lunarMonth = k - n + 1;
      lunarDay = total;
      if (k == 12) {
        if (lunarMonth == Math.floor(lunar.calendar[m] / 0x10000) + 1) {
          lunarMonth = 1 - lunarMonth;
        }
        if (lunarMonth > Math.floor(lunar.calendar[m] / 0x10000) + 1) {
          lunarMonth--;
        }
      }

      return {
        lunarYear: lunarYear,
        lunarMonth: lunarMonth,
        lunarDay: lunarDay,
      };
    }
  }
}
</script>

<style lang="scss">
h5 {
  margin-top: 20px;
  margin-bottom: 5px;
  font-size: 18px;
}
.xy {
  display: flex;
  flex-direction: row;
}
#sign .el-select {
  margin-right: 10px;
  width: 202px;
}
#sign .countrys {
  // margin-bottom: 25px;
  width: 137px;
}
.reverse {
  .el-form-item__content {
    display: flex;
    width: 460px;
    flex-direction: row-reverse;
  }
}
</style>

<style lang="scss" scoped>
// *{
//     border: 1px solid red!important;
// }
.userBtn {
  width: 300px !important;
  margin-left: 80px;
}
@media (max-width: 750px) {
  .userBtn {
    width: 300px !important;
    margin-left: -80px;
  }
  .sex-choose {
    > a {
      width: 30% !important;
      > .img-box {
        width: auto !important;
        height: auto !important;
      }
      img {
        width: 100% !important;
      }
    }
  }
  #sign .el-select {
    width: auto !important;
  }
  .el-date-editor.el-input,
  .el-date-editor.el-input__inner {
    width: auto !important;
  }
  .sign-banner .sb-words .name {
    font-size: 25px;
  }
}
</style>